// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../../utils' as f3;
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

.c-bullying {
    @include f3.section-divider;
    background-color: f3.$yellow-dark;
    overflow-x: hidden; // allow reactions box to cut off on smaller screens

    .c-module-tag-title {
        background-color: f3.$yellow-primary;
    }

    .c-card.t-shadow {
        @include f3.card-shadow(f3.$yellow-extra-dark);
    }

    .c-browser {
        position: relative;
        display: inline-block;
        margin-bottom: $layout-xl;
        width: 100%;
        max-width: $content-sm; // avoid growing img too large

        &-bar {
            background-color: f3.$green-light;
        }

        &-content {
            padding: $spacing-md;

            > img,
            > svg {
                display: block;
                height: auto;
                width: 100%;
            }
        }
    }
}

.c-reaction-box {
    position: absolute;
    bottom: -#{$layout-lg};
    left: 10%;
    width: max-content; // allow hidden overflow on smaller screens;
}

@supports (flex: 1 0 auto) {
    .c-bullying {
        .l-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    @media #{$mq-md} {
        .c-bullying {
            .l-flex {
                flex-flow: row wrap;
                justify-content: center;
                column-gap: $layout-md;
            }

            .c-content {
                flex: 1 0 30%;
            }

            .c-browser {
                flex: 1 1 25%;
            }

            .c-card {
                flex: 1 1 30%;
                max-width: max-content;
            }

            .c-blurb {
                flex: 0 1 55ch;
            }
        }
    }
}

// Animated hearts image
$heart-pink: #ffabb0;
$heart-tan: #f7d5b6;
$heart-white: #fffff2;
$heart-green: #c4fce3;
$heart-lt-purple: #c7abff;
$heart-dk-purple: #9059ff;

@keyframes heartbeat {
    0% { fill: $heart-pink; }
    10% { fill: $heart-dk-purple; }
    20% { fill: $heart-white; }
    30% { fill: $heart-tan; }
    40% { fill: $heart-green; }
    50% { fill: $heart-lt-purple; }
}

@media (prefers-reduced-motion: no-preference) {
    .hearts-image {
        .animate-hearts {
            .animate {
                animation: heartbeat 3s linear;
            }

            .heart1 { animation-delay: 500ms; }
            .heart2 { animation-delay: 700ms; }
            .heart3 { animation-delay: 900ms; }
            .heart4 { animation-delay: 1100ms; }
            .heart5 { animation-delay: 1300ms; }
            .heart6 { animation-delay: 1500ms; }
            .heart7 { animation-delay: 1700ms; }
            .heart8 { animation-delay: 1900ms; }
            .heart9 { animation-delay: 2100ms; }
            .heart10 { animation-delay: 2300ms; }
            .heart11 { animation-delay: 2500ms; }
        }
    }
}
